<template>
  <div class="ck-editor">
    <div id="toolbar-container" />
    <div id="editor" />
  </div>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn' // 中文包
import { Promise } from 'q'
export default {
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      class UploadAdapter {
        constructor(loader) {
          this.loader = loader
        }
        upload() { // 重置上传路径
          // const data = new FormData()
          return new Promise((resolve, reject) => {
            // uploadImage(data).then(res => {
            // 	resolve({
            //     default: result.url
            //   })
            // }).catch(error => {
            // 	reject(error)
            // })
          })
        }
        abort() {
        }
      }
      // 初始化编辑器
      CKEditor.create(document.querySelector('#editor'), {
        removePlugins: ['MediaEmbed'], // 除去视频按钮
        language: 'zh-cn', // 中文
        height: '800px',
        ckfinder: {
          'uploaded': 1,
          'url': '/'
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        }
      }).then(editor => {
        const toolbarContainer = document.querySelector('#toolbar-container')
        toolbarContainer.appendChild(editor.ui.view.toolbar.element)
        // 加载了适配器
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
          return new UploadAdapter(loader)
        }
        this.editor = editor // 将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
      }).catch(error => {
        console.error(error)
      })
    }
  }
}
</script>
<style lang="scss">
.ck-editor {
}
</style>

